<template>
  <footer class="footer">
    <div class="w">
      <div class="footer-content clearfix">
        <div class="left fl">
          <div class="logo-box">
            <router-link  :to="obAccessKey?'/pools/dashboard':'/'"></router-link>
          </div>
          <div class="code-box">
            <img class="img" src="../../assets/images/footer/wechect.png" alt="">
            <p :class="language" v-html="$t('footer.weixin')"></p>
          </div>
        </div>
        <div :class="language" class="nav-box fl clearfix">
          <div class="item fl">
            <h2>{{$t('footer.service')}}</h2>
            <ul>
              <li>
                <a href="https://blockchain.info/" target="_blank">{{$t('footer.blockchain')}}</a>
              </li>
              <li>
                <a href="https://bitcoin.org/" target="_blank">{{$t('footer.bitcoin')}}</a>
              </li>
              <li>
                <a href="https://www.ethereum.org/" target="_blank">{{$t('footer.ethereum')}}</a>
              </li>
            </ul>
          </div>
          <div class="item fl">
            <h2>{{$t('footer.help')}}</h2>
            <ul>
              <li>
                <a :href="preHelpHref+'/articles/360015486632'" target="_blank">{{$t('footer.help39')}}</a>
              </li>
              <li>
                <a :href="preHelpHref+'/articles/360015788891'" target="_blank">{{$t('footer.help46')}}</a>
              </li>
              <li>
                <a :href="preHelpHref" target="_blank">{{$t('footer.help35')}}</a>
              </li>
            </ul>
          </div>
          <div class="item fl">
            <h2>{{$t('footer.contact')}}</h2>
            <ul>
              <li>
                <a href="javascript:;">{{$t('footer.address')}}</a>
              </li>
              <li>
                <a href="javascript:;">{{$t('footer.email')}}</a>
              </li>
              <li>
                <a href="javascript:;">{{$t('footer.qq')}}</a>
              </li>
            </ul>
          </div>
        </div>
        <div class="footer-bottom">
          <p v-html="$t('footer.compony')"></p>
          <p>Copyright © 2018 - 2019 Jiaheweilai. All Rights Reserved</p>
          <p>{{$t('footer.filing')}}</p>
        </div>
      </div>
    </div>
  </footer>
</template>
<script>
import { mapGetters } from 'vuex';

export default {
  name: 'myFooter',
  computed: {
    ...mapGetters(['obAccessKey', 'language']),
    preHelpHref() {
      return `https://support.dpool.top/hc/${this.language === 'zh' ? 'zh-cn' : 'en-us'}`;
    },
  },
};
</script>
<style lang="scss" scoped>
.footer {
  margin-top: 40px;
  widows: 100%;
  position: relative;
  background-color: #333;
  &.footer-home{
    margin-top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    .w{
      .footer-content{
        .left{
          .logo-box{
            a{
              background: url(../../assets/images/logo/footer-home.png) no-repeat;
            }
          }
        }
        .nav-box{
          .item{
            h2{
              color: #1dd3ad;
            }
          }
        }
      }
    }
  }
  .w {
    .footer-content{
      position: relative;
      height: 474px;
      display: flex;
      .left{
        padding-top: 45px;
        .logo-box{
          margin-bottom: 42px;
          a{
            display: block;
            background:url(../../assets/images/logo/logo.png) no-repeat;
            width: 106px;
            height: 40px;
          }
        }
        .code-box{
          .img{
            width: 170px;
            height: 170px;
          }
          p{
            &.en{
              font-size: 14px;
              text-align: center;
            }
            &.zh{
              display: flex;
              justify-content: space-between;
            }
            width: 170px;
            margin-top: 12px;
            line-height: 36px;
            font-size: 24px;
            color: #ffffff;
          }
        }
      }
      .nav-box{
        padding-top: 20px;
        padding-left: 120px;
        &.en{
          flex: 1;
          display: flex;
          justify-content: space-between;
        }
        &.zh{
          .item{
            &:nth-of-type(2){
              margin-left: 208px;
            }
            &:nth-of-type(3){
              margin-left: 234px;
            }
          }
        }
        .item{
          h2{
            font-size: 30px;
            line-height: 88px;
            color: #70c1b3;
          }
          ul{
            li{
              a{
                line-height:  48px  ;
                color: rgba(255,255,255,.3);
                font-size: 14px;
                &:hover{
                  color:rgba(255,255,255,.4);
                }
              }
            }
          }
        }
      }
      .footer-bottom{
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 66px;
        text-align: center;
        color: rgba(255,255,255,.3);
        font-size: 14px;
        line-height: 26px;
      }
    }
  }
}
</style>
